<template>
  <div>
    <button @click="addRole">添加角色</button>
    <button @click="deleteRole">批量删除角色</button>

    <el-dialog title="分配数据权限" :visible.sync="dialogFormVisible">
      <el-form :model="text">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="数据权限" :label-width="formLabelWidth">
          <el-tree
            :data="form"
            show-checkbox
            node-key="id"
            ref="tree"
            :default-checked-keys="pids"
            :props="defaultProps"
            :default-expand-all="true"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getRoleByPermission"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="60"> </el-table-column>
      <el-table-column prop="roleName" label="角色名" width="150">
      </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="120">
      </el-table-column>
      <el-table-column prop="roleStatus" label="角色状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.roleStatus === 1" size="small" type="success"
            >启用</el-tag
          >
          <el-tag
            v-else-if="scope.row.roleStatus === 2"
            size="small"
            type="danger"
            >禁用</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="updateRole(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" @click="authRoleUserShow(scope.row)"
            >分配用户</el-button
          >
          <el-button type="text" @click="addPermissionToRole(scope.row)"
            >添加数据权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    getRoleByPermission(){
    var app = this;
    console.log(app.roleId);
      this.$httpRequest.post("auto/addRoleByPermission/"+app.roleId,
      app.$refs.tree.getCheckedKeys()
      )
      .then(({data})=>{
        console.log(data);
           app.dialogFormVisible = false;
      })
      .catch((error)=>{
        console.log(error);
      })
    },
    addPermissionToRole(row) {
      var app = this;
      this.$httpRequest
        .post("auto/selectPermissionByRid/"+row.id)
        .then(({ data }) => {
          // console.log(data);
          app.form = app.$format(data.data);
          app.form.name=row.roleName; 
          app.pids=data.haveData;
          app.roleId=row.id;
          app.dialogFormVisible = true;
          
        })
        .catch((error) => {
          console.log(error);
        });
    },
    authRoleUserShow(row) {
      this.$router.push("toShowRoleUser/" + row.id);
    },
    sexFormatter(row, column, cellValue, index) {
      return cellValue == 0 ? "女" : "男";
    },
    deleteRole() {
      //遍历获取的所有每行数据
      this.idlist.forEach((user, index) => {
        //将其中的id值存入ids数组
        this.ids[index] = user.id;
      });
      this.$httpRequest
        .post(
          "/role/deleteRoles",
          //将数组发送到后端批量进行删除
          this.ids
        )
        .then((data) => {
          // console.log(this.ids);
          console.log(data);
          this.$router.go(0);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSelectionChange(val) {
      this.idlist = val;
      // console.log(this.idlist);
    },
    addRole() {
      this.$router.push("/toAddOrUpdateRole");
    },
    //显示所有
    findAll() {
      var app = this;
      this.$httpRequest
        .post("role/selectRolePage", {
          current: 1,
          size: 10,
        })
        .then(({ data }) => {
          app.tableData = data.page.records;
          app.current = data.page.current;
          app.total = data.page.total;
          app.size = data.page.size;
          console.log(data.page);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改用户
    updateRole(row) {
      this.$router.push("/toAddOrUpdateRole/" + row.id);
    },
    // 删除用户
    handleClick(row) {
      var app = this;
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$httpRequest
            .get("role/deleteRoleById", {
              params: { id: row.id },
            })
            .then(() => {
              this.$message({
                showClose: true,
                type: "success",
                message: "删除成功!",
                duration: 1500,
                onClose: () => {
                  this.$router.go(0);
                },
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除",
            duration: 1500,
          });
        });
    },
    //一页显示多少条
    handleSizeChange(val) {
      var app = this;
      this.$httpRequest
        .post("role/selectRolePage", {
          current: 1,
          size: val,
        })
        .then(({ data }) => {
          app.tableData = data.page.records;
          this.size = val;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询当前页数据
    handleCurrentChange(val) {
      var app = this;

      this.$httpRequest
        .post("role/selectRolePage", {
          current: val,
          size: app.size,
        })
        .then(({ data }) => {
          app.tableData = data.page.records;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted: function () {
    this.findAll();
  },
  data() {
    return {
      userDate: [],
      show: "",
      dialogFormVisible: false,
      tableData: [],
      total: 100,
      current: 1,
      size: 20,
      idlist: [],
      ids: [],
      roleId: "",
      form: [],
      text: {
        name: "",
        region: "",
      },
      formLabelWidth: "120px",
      defaultProps: {
        children: "children",
        label: "name",
      },
      pids:[],
    };
  },
};
</script>
<style scoped>
</style>